import { Separator } from "@/components/ui/separator"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { faqCategories } from "@/config/faqDataConfig"
import { FaqCard } from "@/components/faq/FaqCard"
import { Button } from "@/components/ui/button"
import { Settings } from "lucide-react"
import Link from "next/link"
import { fallbackLng } from "@/i18n/settings"

interface Props {
    params: {
        lng: string;
    }
}

export default async function FaqPage(props: Props) {
    const resolvedParams = await props.params
    const lng = resolvedParams.lng
    const localizedFaqCategories = faqCategories[lng] || faqCategories[fallbackLng];

    return (
        <div className="container py-6">
            <section className="overflow-hidden rounded-[0.5rem] border bg-background shadow">
                <div className="space-y-6 p-10 pb-16">
                    <div className="flex justify-between items-center">
                        <div className="space-y-0.5">
                            <h2 className="text-2xl font-bold tracking-tight">Frequently Asked Questions</h2>
                            <p className="text-muted-foreground">
                                Find answers to common questions about using the EVCP system.
                            </p>
                        </div>
                        <Link href={`/${lng}/evcp/faq/manage`}>
                            <Button variant="outline">
                                <Settings className="w-4 h-4 mr-2" />
                                Manage FAQ
                            </Button>
                        </Link>
                    </div>
                    <Separator className="my-6" />
                    
                    <Tabs defaultValue={localizedFaqCategories[0]?.label} className="space-y-4">
                        <TabsList>
                            {localizedFaqCategories.map((category) => (
                                <TabsTrigger key={category.label} value={category.label}>
                                    {category.label}
                                </TabsTrigger>
                            ))}
                        </TabsList>

                        {localizedFaqCategories.map((category) => (
                            <TabsContent key={category.label} value={category.label} className="space-y-4">
                                {category.items.map((item, index) => (
                                    <FaqCard key={index} item={item} />
                                ))}
                            </TabsContent>
                        ))}
                    </Tabs>
                </div>
            </section>
        </div>
    )
}